import React,{Component} from'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';

import{connect}from 'react-redux';
import './../css/login.css';
import {loginData} from"./action/loginAction.js";
class Login extends Component{
    constructor(props){
        super(props);
        this.handclink=this.handclink.bind(this);
        this.passwordChange=this.passwordChange.bind(this);
        this.userChange=this.userChange.bind(this);
        this.addclick=this.addclick.bind(this);
        this.removeclick=this.removeclick.bind(this);
        this.data={
            user:'',
            passWord:'',
            arry:[]
        }
        this.state={
            addInput:true,
            removeInput:false
        }
    }

    handclink(){
        if(this.data.user.search(/^(13[0-9]|14[579]|15[0-3,5-9]|16[6]|17[0135678]|18[0-9]|19[89])\d{8}$/)){
            alert('请输入正确的手机号')
            return
        }else if(this.data.passWord==''||this.data.passWord.length<3){
            alert('请输入不少于三位数的密码')
            return
        }else{
            this.props.dispatch(loginData(this.data.user,this.data.passWord))
            this.props.history.push('/index')
        }
        
      
        
    }
    userChange(evt){
        this.data.user=evt.target.value;
    }
    passwordChange(evt){
       this.data.passWord= evt.target.value;
    }
    addclick(){
        this.data.arry.push(<input placeholder="请输入内容"/>)
        this.setState({
            addInput:false
        })
        console.log('aaaa')
    }
    removeclick(){
        this.data.arry.shift(0);
        this.setState({
            removeInput:true
        })
        console.log('aaa')
    }
    render(){
        let addRow
        if(!this.state.addInput){
            addRow=this.data.arry.map((value,index)=>{
                return <div key={index}>
                    {value}
                </div>
            })
        }
        if(this.state.removeInput){
            addRow=this.data.arry.map((value,index)=>{
                return <div key={index}>
                            {value}
                        </div>
            })
        }
       
        return<div className='login-box'>
                <h5>某某某系统</h5>
                <div className='login-conent' >
                    <div className='login-pass' >
                        <input type="text" onChange={this.userChange} placeholder='请输入用户名:'/>
                        <input type='password'  onChange={this.passwordChange} placeholder='请输入密码:'/>
                    </div>
                    <button onClick={this.handclink}>登录</button>
                </div>
                <div>
                    <div>
                        <input type='text' placeholder="请输入内容"/>
                        <button onClick={this.addclick} style={{width:'100px'}}>+</button>
                        <button onClick={this.removeclick} style={{width:'100px'}} >_</button>
                        {addRow}
                        {/* {this.state.addInput&&<input placeholder="请输入内容"/>} */}
                    </div>
                </div>
        </div>
        
    }
}
// export default Login;
function mapStateToProps(state){
    console.log("-----",state)
    return {
        
    };
}
export default connect(mapStateToProps)(Login)